<template>  <div>
  <el-button @click="goAddBanner">添加轮播图</el-button>
</div>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column fixed prop="bannerid" label="编号" width="100%" />
    <el-table-column prop="name" label="图片" width="120" >
      <template #default="scope">
  <img :src="scope.row.img" alt="" style="width: 100px;">
</template>

  </el-table-column >
    <el-table-column prop="flag" label="是否启用" width="220" >
      <template #default="scope">
        <el-switch v-model="scope.row.flag" />
    </template>
    </el-table-column>
 
    <el-table-column prop="alt" label="图片提示" width="220" />
    <el-table-column prop="link" label="图片链接" width="600" />
    <el-table-column fixed="right" label="操作" width="220">
      <template #default="scope">
        <el-button link type="primary" size="small" @click="handldeleteick(scope.row.bannerid)">删除</el-button>
        <el-button link type="primary" size="small" @click="modify(scope.row)">编辑</el-button>
     
      </template>
    </el-table-column>

  </el-table>
  <Modifybanner :drawer="isShowEdit" :nowBanner="nullvalue" @hideEdit="hideEdit" @modified="modified"></Modifybanner>
</template>

<script lang="ts" setup>
import{reactive,ref} from "vue"
import {bannerinapi,handldeleteickapi} from "@/api/bannerin";
import { ElMessage, ElMessageBox } from "element-plus";
import Modifybanner from "./Modifybanner.vue"
import{useRouter} from "vue-router";

// 当前修改bannerid的值
const isShowEdit = ref(false)

// 修改编辑窗口

  const nullvalue = reactive<INdata>(
    {
      "img": "",
      "alt": "",
      "link": "",
      "bannerid": "",
      "flag": false}
  )

 const modify = (nowData:INdata)=>{

  nullvalue.img= nowData.img,
  nullvalue.alt= nowData.alt,
  nullvalue.link= nowData.link,
  nullvalue.bannerid= nowData.bannerid,
  nullvalue.flag= nowData.flag,

  isShowEdit.value = true;

  // console.log(isShowEdit);
 }

 const hideEdit=()=>{
  isShowEdit.value = false;
}


export interface INdata{
            "img":string,
            "alt": string,
            "link": string,
            "bannerid": string,
            "flag": boolean       
          }
const tableData= reactive<Array<INdata>>([])
    // 添加 -查看
async function handleClick(){
  const res = await bannerinapi()
    if (res.data.code==200) { 
      tableData.length = 0
      tableData.push(...res.data.data)  
  }
}
const $router=useRouter()


// 添加
  const goAddBanner = () => {
  $router.push("/Home/barnnerpush");
};

handleClick()


// 删除
const handldeleteick=(bannerid:string)=>{
 ElMessageBox.confirm("您确定要删除嘛？","删除提示",{
  confirmButtonText:"确定",
  cancelButtonText:"取消",
  type:"warning"
 }) .then(async () => {
      const res = await handldeleteickapi(bannerid);
      if (res.data.code === "200") {
        ElMessage.success("删除成功！");
        let index = tableData.findIndex(item=>item.bannerid===bannerid);
        tableData.splice(index,1);
      } else {
        ElMessage.info("删除失败！");
      }
    })
    .catch(() => {});
}


const modified=()=>{
  hideEdit();
  // getBannerList();
}


</script>



<style scoped lang="scss">

</style>